import {computed} from 'vue'
import {mapState , useStore} from 'vuex'

/**
 * @param 封装一个useState函数
 */
// export default class UseMapper{
//    public static useState(mapper:any){
//         // const store = useStore()
//         // 使用辅助函数返回应该对象
//         const storeFn = mapState(mapper)
//         const state = {}
//     // 遍历辅助函数返回的对象来拿到value值
//         Object.keys(storeFn).forEach(item=>{
//             // setup中没有this， 所以通过bind来改变this的指向
//             // @ts-ignore
//             const fn = storeFn(item).bind({$store:store})
//             // @ts-ignore
//             //拿到函数，作为计算属性的参数，最后在留在一个对象中
//             state[item] = computed(fn)
//         })
//         return state
//     }
// }
 const useState = (mapper:any)=>{
    const store = useStore()
    // 使用辅助函数返回应该对象
    const storeFn = mapState(mapper)
    console.log(storeFn);
    
    const state = {}
// 遍历辅助函数返回的对象来拿到value值
    Object.keys(storeFn).forEach(item=>{
        // setup中没有this， 所以通过bind来改变this的指向
        // @ts-ignore
        const fn = storeFn(item).bind({$store:store})
        // @ts-ignore
        //拿到函数，作为计算属性的参数，最后在留在一个对象中
        state[item] = computed(fn)
    })
    return state
}
export  {
    useState
}
